<template>
    <inner-layout v-loading="loading">

        <div class="filter-bar clearfix">
            <div class="filter-item">
                <span class="filter-item-title">对比模式</span>
                <el-select v-model="apiParams.mode" placeholder="请选择">
                    <el-option
                      v-for="item in modeList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.code">
                    </el-option>
                </el-select>
            </div>

            <div class="filter-item">
                <span class="filter-item-title">对比指标</span>
                <el-select v-model="apiParams.type" placeholder="请选择">
                    <el-option
                      v-for="item in typeList"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code">
                    </el-option>
                </el-select>
            </div>

            <div class="filter-item">
                <span class="filter-item-title">品种1</span>
                <el-select v-model="apiParams.code1" placeholder="请选择" class="filter-item-select">
                    <el-option
                      v-for="item in codeList"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code">
                    </el-option>
                </el-select>
            </div>

            <div class="filter-item">
                <span class="filter-item-title">品种2</span>
                <el-select v-model="apiParams.code2" placeholder="请选择" class="filter-item-select">
                    <el-option
                      v-for="item in codeList"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code">
                    </el-option>
                </el-select>
            </div>

            <div class="filter-item">
                <el-button @click="filterData">确定</el-button>
            </div>

        </div>

        <div id="chartObj" class="charts-wrap"></div>

    </inner-layout>
</template>

<script>
import { getDjIndexEvaDetail } from '@/api/danjuanapp'
import { parseTime } from '@/utils/index'
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
export default {
	name: 'IndexVsIndex',
	components: { },
    directives: { },
	mixins: [],
	data() {
		return {
			loading: false,
			dataList: {
                date: [],
                val:  [],
            },
            apiParams: {
                mode: '/',
                type: 'pb',
                code1: '',
                code2: '',
            },
            modeList: [
                {id:1, code: '/', name: '按比值'},
                {id:2, code: '-', name: '按差值'},
            ],
            typeList: [
                {code: 'pb', name: 'PB'},
                {code: 'pe', name: 'PE'},
                {code: 'roe', name: 'ROE'},
            ],
            codeList: [
                {code: 'SH000016', name: '上证50'},
                {code: 'SH000300', name: '沪深300'},
                {code: 'SH000905', name: '中证500'},
                {code: 'SH000852', name: '中证1000'},
                {code: 'SZ399006', name: '创业板'},
                {code: 'SH000688', name: '科创50'},
                {code: 'SZ399975', name: '证券公司'},
                {code: 'SZ399967', name: '中证军工'},
                {code: 'SZ399989', name: '中证医疗'},
                {code: 'SZ399986', name: '中证银行'},
                {code: 'SZ399396', name: '食品饮料'},
                {code: 'SZ399997', name: '中证白酒'},
                {code: 'SZ399417', name: '新能源车'},
            ],
            chart: null,
            chartTitle: ''
		}
	},
	created() {

	},
    beforeDestroy() {
    	if (!this.chart) {
    		return
    	}
    	this.chart.dispose()
    	this.chart = null
    },
	methods: {
        filterData() {
            let that = this
            console.log('filterData.apiParams', that.apiParams)
            if (!that.apiParams.code1 || !that.apiParams.code2) {
                that.$message.error('请选择需要比较的两个品种')
                return
            } else if (that.apiParams.code1 == that.apiParams.code2) {
                that.$message.error('需要比较的两个品种不能相同')
                return
            }

            // let _data1 = getDjIndexEvaDetailDemo1()
            // let _data2 = getDjIndexEvaDetailDemo2()
            // console.log('filterData', _data1, _data2)
            // if (_data1.result_code === 0 && _data2.result_code === 0) {
            //     that.genCharts(_data1.data['index_eva_'+that.apiParams.type+'_growths'], _data2.data['index_eva_'+that.apiParams.type+'_growths'])
            // }

            getDjIndexEvaDetail(that.apiParams.code1, that.apiParams.type, '5y').then(res1 => {
                getDjIndexEvaDetail(that.apiParams.code2, that.apiParams.type, '5y').then(res2 => {
                    let _data1 = res1.data
                    let _data2 = res2.data
                    if (_data1.result_code === 0 && _data2.result_code === 0) {
                        that.genCharts(_data1.data['index_eva_'+that.apiParams.type+'_growths'], _data2.data['index_eva_'+that.apiParams.type+'_growths'])
                    }
                })
            })
        },
        genCharts(data1, data2) {
            let that = this

            if (!data1 || !data2 || data1.length <= 0 || data2.length <= 0) {
                that.$message.error('获取数据失败')
                return
            }
            
            that.dataList.date = []
            that.dataList.val  = []

            let _type = that.apiParams.type
            let _dataList1 = {}
            let _dataList2 = {}
            // debugger
            data1.forEach(row => {
                _dataList1[row.ts] = row[that.apiParams.type]
            })
            data2.forEach(row => {
                _dataList2[row.ts] = row[that.apiParams.type]
            })
            Object.keys(_dataList1).forEach(key => {
                if (_dataList2[key]) {
                    if (that.apiParams.mode == '-') {
                        that.dataList.val.push(_dataList1[key] - _dataList2[key])
                    } else {
                        that.dataList.val.push(_dataList1[key] / _dataList2[key])
                    }
                    that.dataList.date.push(parseTime(key, '{y}-{m}-{d}'))
                }
            })
            console.log('that.dataList', that.dataList)
            if (!that.chart) {
                that.chart = echarts.init(document.getElementById('chartObj'))
            }

            let _code1 = that.codeList.find(row => row.code == that.apiParams.code1)
            let _code2 = that.codeList.find(row => row.code == that.apiParams.code2)
            that.chartTitle = _code1 && _code2 ? _code1.name + ' VS ' + _code2.name : ''

            that.setOptions()
        },
        setOptions() {
            let that = this
            that.chart.setOption({
                title: {
                    show: that.chartTitle ? true : false,
                    left: 'center',
                    text: that.chartTitle
                },
                tooltip: {
                	trigger: 'axis',
                	axisPointer: {
                		type: 'cross'
                	},
                	padding: [5, 10]
                },
                xAxis: {
                    data: that.dataList.date
                },
                yAxis: {
                    scale: true
                },
                series: [
                    {
                        name: that.apiParams.mode == '-' ? '差值' : '比值',
                        type: 'line',
                        data: that.dataList.val,
                        itemStyle: {
                        	normal: {
                        		color: '#3888fa',
                        		lineStyle: {
                        			color: '#3888fa',
                        			width: 1
                        		}
                        	}
                        },
                        markLine : {
                            data : [
                                {type : 'average', name: '平均值'}
                            ]
                        }
                    },
                ]
            })
        }
	}
}
</script>

<style lang="scss" scoped>
    .filter-item {
        .filter-item-title {
            margin-right: 5px;
        }
        .filter-item-select {
            width: 150px;
        }
    }
    .charts-wrap {
        max-width: 100%;
        height: calc(100vh - 350px);
    }
</style>
